<script setup lang="ts">
import Tools from '@/utils/tools';

interface IProps {
  data: IGoodsAdditionalInfo;
}

type EmitEvents = {
  (event: 'change', payload: { value: string }): void;
};

const props = defineProps<IProps>();
const emits = defineEmits<EmitEvents>();
const show = ref<boolean>(false);
const _value = ref<string>(props.data.value || '');

const handlePickerChange = (value: number, type: 'change' | 'confirm') => {
  _value.value = Tools.formatTimestamp(value, 'YYYY-MM-DD hh:mm:ss');
  emits('change', { value: _value.value });
  if (type === 'confirm') show.value = false;
};
</script>

<template>
  <van-cell :title="props.data.attrName" :required="props.data.requiredFlag" is-link @click="show = !show">
    <view class="c-text-color-grey text-align-left c-text-12" v-if="!_value">请选择{{ props.data.attrName }}</view>
    <view class="text-align-left c-text-12" v-else>{{ _value }}</view>
  </van-cell>
  <van-popup position="bottom" round :show="show" @close="show = false">
    <view class="bg-white w-full">
      <van-datetime-picker type="datetime" :value="_value || new Date().getTime()" :title="`请选择${props.data.attrName}`" @cancel="show = false" @confirm="(e: any) => handlePickerChange(e.detail, 'confirm')" />
    </view>
  </van-popup>
</template>
